/* 成绩录入页面思路分析
1.页面一加载,发送ajax请求学员信息列表
2.点击分数td,给当前td动态添加一个input输入框
    * (1)td标签是动态新增的元素,需要注册委托事件
    * (2)学员id和姓名不能修改，只有分数才可以修改
    * (3)输入框默认显示当前点击的td的文本
3.输入框按enter键 : (1)获取输入框文本 (2)发送ajax请求  (3)移除输入框
*/


//1.页面一加载,发送ajax请求学员信息列表
// const getScoreList = () => {
//     axios({
//         url: '/score/list',
//         method: 'get',
//     }).then(res => {
//         //成功回调
//         console.log(res)
//         const data = res.data.data
//         document.querySelector('tbody').innerHTML = Object.keys(data).map(item =>
//             `
//         <tr>
//             <th scope="row">${item}</th>
//             <td>${data[item].name}</td>
//             <td class="score" data-id="${item} data-batch="1">${data[item].score[0]}</td>
//             <td class="score" data-id="${item} data-batch="2">${data[item].score[1]}</td>
//             <td class="score" data-id="${item} data-batch="3">${data[item].score[2]}</td>
//             <td class="score" data-id="${item} data-batch="4">${data[item].score[3]}</td>
//             <td class="score" data-id="${item} data-batch="5">${data[item].score[4]}</td>
//         </tr>
//         `
//         ).join('')
//     })
// }
// //调用函数
// getScoreList()


//1查询数据
const getScoreData = () => {
    axios({
        url: '/score/list',
        method: 'get',
    }).then(res => {
        //成功回调
        // console.log(res)
        renderData(res.data.data)
    })
}
//调用函数
getScoreData()
/* 封装渲染函数 */
const renderData = arr => {
    document.querySelector('tbody').innerHTML = Object.keys(arr).map(item => `
        <tr>
            <th scope="row">${item}</th>
            <td>${arr[item].name}</td>
            <td class="score" data-id="${item}" data-batch="1">${arr[item].score[0]}</td>
            <td class="score" data-id="${item}" data-batch="2">${arr[item].score[1]}</td>
            <td class="score" data-id="${item}" data-batch="3">${arr[item].score[2]}</td>
            <td class="score" data-id="${item}" data-batch="4">${arr[item].score[3]}</td>
            <td class="score" data-id="${item}" data-batch="5">${arr[item].score[4]}</td>
        </tr>`
    ).join('')
}

//2.修改数据
//2.1点击分数td,给td新增一个inp输入框
// 事件委托,通过类名判断分数td
//2.2输入框Enter键:发送ajax修改分数
//2.3输入框失去焦点:移除输入框

//2.1点击分数td,给td新增一个inp输入框
// 事件委托,通过类名判断分数td  
document.querySelector('tbody').addEventListener('click', function (e) {
    if (e.target.classList.contains('score')) {
        const input = document.createElement('input')
        //添加类名
        input.classList.add('inp')
        //将值赋值给input
        input.value = e.target.innerText
        e.target.appendChild(input)
        //输入框自动选中聚焦
        input.select()
        //失去焦点时,移除input标签
        input.addEventListener('blur', function () {
            //移除input
            input.remove()
        })
        //将当前点击的元素存起来
        const td = e.target
        //2.2输入框Enter键:发送ajax修改分数
        document.querySelector('tbody').addEventListener('keyup', function (e) {
            if (e.key === "Enter") {
                const stu_id = td.dataset.id
                const batch = td.dataset.batch
                const score = input.value
                //发送请求
                axios({
                    url: '/score/entry',
                    method: 'post',
                    data: { stu_id, batch, score }
                }).then(res => {
                    //成功回调
                    console.log(res)
                    if (res.data.code === 0) {
                        Toast.success(res.data.message)
                        //修改成功重新查询数据
                        getScoreData()
                    }
                }).catch(err => {
                    // console.log(err);
                    //提示错误
                    Toast.fail(err.response.data.message)
                    //重新查询数据
                    getScoreData()
                })
            }
        })
    }
}) 